<template>
  <div class='two channel-item'>
    <el-form :rules="rules" ref="ruleForm" label-width="200px" class="editor-plus-form" size="small">
      <span class="share-row" v-hasPermi="['system:channel:edit']">
        <el-button type="primary" size="mini" @click="share" v-if="!channelDetails.channelPid">共享栏目参数</el-button>
        <el-button type="primary" size="mini" @click="noShare" v-else>取消共享模板</el-button>
        <el-button type="primary" size="mini" @click="handleSharedCloumn">查看共享的栏目</el-button>
        <!-- <el-button type="primary" size="mini">查看共享的栏目</el-button>pId{{channelDetails.pId}} -->
        <!-- <div v-if="share2.length>0"> -->
        <!-- <div v-if="false">
          <el-button type="primary" size="mini" @click="cacleShare">取消共享</el-button>
          您已经选择将内容共享给栏目 <font color='red' v-for="(item,index) in share2" :key="index"> 《{{item}}》</font>
        </div> -->
        <span v-if="share2.length>0">
          <!-- <div v-if="false"> -->
          <el-button type="primary" size="mini" @click="cacleShare()">取消共享</el-button>
          您已经选择将内容共享给栏目 <font color='red' v-for="(item,index) in share2" :key="index"> 《{{item.label}}》</font>
        </span>
        <span v-if="share2From.length>0">
          <!-- <div v-if="false"> -->
          共享栏目<font color='red' v-for="(item,index) in share2From" :key="index"> 《{{item.label}}》</font>
        </span>
      </span>
      <el-row>
        <el-col :span="12">
          <el-form-item label="栏目状态:" prop="name">
            <el-radio-group v-model="channelDetails.channelState">
              <el-radio :label="'1'">打开</el-radio>
              <el-radio :label="'0'">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="false">
          <el-form-item label="门户信息共享:" prop="channelShareToXML">
            <el-radio-group v-model="channelDetails.channelShareToXML">
              <el-radio :label="'1'">打开</el-radio>
              <el-radio :label="'0'">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="12">
          <el-form-item label="新窗口是否弹出:" prop="openNew">
            <el-radio-group v-model="channelDetails.channelProp.openNew">
              <el-radio :label="'1'">是</el-radio>
              <el-radio :label="'0'">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="新窗口使用默认大小:" prop="useDefaultWin">
            <el-radio-group v-model="channelDetails.channelProp.useDefaultWin">
              <el-radio :label="'1'">是</el-radio>
              <el-radio :label="'0'">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="新窗口宽度:" prop="winWidth">
            <el-input v-model.number="channelDetails.channelProp.winWidth" maxlength='4' @input="(val)=>{channelDetails.channelProp.winWidth = val.replace(/\D/g, '')}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="新窗口高度:" prop="winHeight">
            <el-input v-model.number="channelDetails.channelProp.winHeight" maxlength='5' @input="(val)=>{channelDetails.channelProp.winHeight = val.replace(/\D/g, '')}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="内容图片宽度:" prop="imgWidth">
            <el-input v-model.number="channelDetails.channelProp.imgWidth" maxlength='4' @input="(val)=>{channelDetails.channelProp.imgWidth = val.replace(/\D/g, '')}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内容图片高度:" prop="imgHeight">
            <el-input v-model.number="channelDetails.channelProp.imgHeight" maxlength='4' @input="(val)=>{channelDetails.channelProp.imgHeight = val.replace(/\D/g, '')}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="RSS定制:" prop="channelToRSS">
            <el-radio-group v-model="channelDetails.channelToRSS">
              <el-radio :label="'1'">打开</el-radio>
              <el-radio :label="'0'">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="定制条数:" prop="rssNum">
            <el-input v-model.number="channelDetails.rssNum" maxlength='2' @input="(val)=>{channelDetails.rssNum = val.replace(/\D/g, '')}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="前台静态页面发布页数:" prop="maxPage">
            <el-input v-model.number="channelDetails.channelProp.maxPage" maxlength='4' style="width: calc(100% - 40px);" @input="(val)=>{channelDetails.channelProp.maxPage = val.replace(/\D/g, '')}"></el-input>
            <el-tooltip class="item" effect="dark" content="请根据实际需求尽可能的减少发布页数，已减轻服务器压力。" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="栏目排序" prop="sequence">
            <el-input v-model.number="channelDetails.sequence" maxlength='4' style="width: calc(100% - 40px);" :min="0" @input="(val)=>{channelDetails.sequence = val.replace(/\D/g, '')}" />
            <el-tooltip class="item" effect="dark" content="整数，由大到小进行栏目排序" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="前台文章开始时间:" prop="pubtime">
            <el-date-picker v-model="channelDetails.pubtime" style="width: calc(100% - 40px);" type="date" placeholder="选择日期" value-format='yyyy-MM-dd HH:mm:ss'>
            </el-date-picker>
            <el-tooltip class="item" effect="dark" content="前台获取文章列表开始时间" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="父级栏目id:" prop="parentId">
            <el-input v-model.number="channelDetails.parentId" maxlength='10' style="width: calc(100% - 40px);" @input="(val)=>{channelDetails.parentId = val.replace(/\D/g, '')}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    share2: {},
    share2From: {},
    pId: {},
    channelPid: {},
    channelDetails: Object,
  },
  data() {
    return {
      rules: {},
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.$nextTick(() => {
      // this.$emit("viewShareCloumn", "P");
    });
  },

  watch: {},

  methods: {
    share() {
      this.$emit("shareCloumn", "P");
    },
    handleSharedCloumn() {
      this.$emit("handleSharedCloumn", "P");
    },
    noShare() {
      this.$emit("update:channelPid", 0);
    },
    //共享源取消共享   不要
    cacleShare() {
      this.$emit("update:pId", null);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    propsInputValidate(prop) {
      console.log("🚀 ~ file: two.vue:199 ~ propsInputValidate ~ prop", prop);
      switch (prop) {
        case "winWidth":
          this.channelDetails.channelProp.winWidth =
            this.channelDetails.channelProp.winWidth.replace(/\D/g, "");
          break;
        case "winHeight":
          this.channelDetails.channelProp.winHeight =
            this.channelDetails.channelProp.winHeight.replace(/\D/g, "");
          break;
        case "imgHeight":
          this.channelDetails.channelProp.imgHeight =
            this.channelDetails.channelProp.imgHeight.replace(/\D/g, "");
          break;
        case "imgWidth":
          this.channelDetails.channelProp.imgWidth =
            this.channelDetails.channelProp.imgWidth.replace(/\D/g, "");
          break;
        case "rssNum":
          this.channelDetails.rssNum = this.channelDetails.rssNum.replace(
            /\D/g,
            ""
          );
          break;
        case "maxPage":
          this.channelDetails.maxPage = this.channelDetails.maxPage.replace(
            /\D/g,
            ""
          );
          break;
        case "sequence":
          // this.channelDetails.sequence = this.channelDetails.sequence.replace(
          //   /\D/g,
          //   ""
          // );
          break;
        case "parentId":
          this.channelDetails.parentId = this.channelDetails.parentId.replace(
            /\D/g,
            ""
          );
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped lang='scss'>
@import "~@/assets/styles/el-form.scss";
.two {
  // padding: 0 100px;
  max-width: 1100px;
  margin: 0 auto;
}
</style>
